@import "./custom";
@import "./components/index";
.yui-header {
  display: flex;
  padding: 0;
  height: 42px;
  background-color: $theme-header;
  .header-tags-content {
    overflow: hidden;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
  }
  .yui-header--user {
    width: 120px;
  }
}

// .tags-container {
//     position: relative;
//     display: flex;
//     align-items: flex-end;
//     background-color: $primary-color;

//     height: 100%;
//     .tags-close-main {
//       width: 32px;
//       height: 32px;
//       line-height: 32px;
//       text-align: center;
//       background-color: #fff;
//       border-radius: 2px;
//       cursor: pointer;
//     }

//     .tags-list {
//       display: flex;

//       .tags {
//         position: relative;
//         // padding-left: 10px;
//         display: flex;
//         align-items: center;
//         justify-content: space-between;
//         width: 160px;
//         height: 32px;
//         color: #fff;
//         border-radius: 10px 10px 0 0;
//         transition: transform 0.2s ease-in-out;
//         &:hover {
//           // background-color: red;
//         }

//         .title {
//           display: flex;
//           align-items: center;
//           justify-content: center;
//           width: 100%;
//           height: 100%;
//           cursor: pointer;
//         }
//         .close {
//           position: absolute;
//           right: 0;
//           color: red;
//           bottom: 0;
//           top: 0;
//           width: 32px;
//           z-index: 3;
//           display: flex;
//           align-items: center;
//           justify-content: center;
//           i:hover {
//             color: #444;
//             background: #d8d8d8;
//             border-radius: 60%;
//             color: #fff;
//             /* font-size: 32px; */
//             font-weight: bold;
//           }
//         }
//         &.active {
//           background-color: #f4f7f9;

//           &::after,
//           &::before {
//             position: absolute;
//             bottom: 0;
//             z-index: 1;
//             content: "";
//             width: 10px;
//             height: 10px;
//             background-color: #f4f7f9;
//           }

//           &::before {
//             left: -10px;
//           }

//           &::after {
//             right: -10px;
//           }

//           .title {
//             color: #000;
//             &::before,
//             &::after {
//               content: "";
//               position: absolute;
//               bottom: 0;
//               z-index: 2;
//               width: 20px;
//               height: 34px;
//               border-radius: 10px;
//               background-color: #515b6d;
//             }

//             &::before {
//               left: -20px;
//             }
//             &::after {
//               right: -20px;
//             }
//           }
//         }
//         &:not(.active) {
//           &::after {
//             content: "";
//             position: absolute;
//             right: 0;
//             height: 20px;
//             width: 1px;
//             background-color: #f4f7f9;
//           }
//         }
//       }
//     }
//   }
//   /deep/ .ivu-tabs-bar {
//     // border-bottom: none;
//     margin-bottom: 0;
//   }
//   /deep/ .ivu-tabs {
//     flex: 1;
//   }

//   /deep/ .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
//     margin-left: 10px;
//   }

//   /deep/ .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab .ivu-tabs-close {
//     width: 22px;
//     transform: translateZ(0);
//     margin-right: -6px;
//   }

//   /deep/
//     .ivu-tabs.ivu-tabs-card
//     > .ivu-tabs-bar
//     .ivu-tabs-tab.ivu-tabs-tab-active {
//     height: 32px;
//     background: #fff;
//     color: #2d8cf0;
//     transform: none;
//     border-radius: 10px 10px 0 0;
//     border-color: #5fa5f4;
//   }

//   /deep/
//     .ivu-tabs.ivu-tabs-card
//     > .ivu-tabs-bar
//     .ivu-tabs-tab
//     .ivu-tabs-close:hover {
//     color: #444;
//     background: #d8d8d8;
//     border-radius: 60%;
//     color: #fff;
//     /* font-size: 32px; */
//     font-weight: bold;
//   }
